#header-post
  position: fixed
  top: 2rem
  right: 0
  display: inline-block
  float: right
  z-index: 100

  a
    background: none
    color: inherit
    text-decoration: none

  a.icon
    background: none

    &:hover
      color: $color-link

  ol
    list-style-type: none

  ul
    display: inline-block
    margin: 0
    padding: 0
    list-style-type: none

    li
      display: inline-block
      margin-right: 15px
      vertical-align: middle

    li:last-child
      margin-right: 0

  #menu-icon
    float: right
    margin-right: 2rem
    margin-left: 15px

    &:hover
      color: $color-accent-1

  #menu-icon-tablet
    float: right
    margin-right: 2rem
    margin-left: 15px

    &:hover
      color: $color-accent-1

  #top-icon-tablet
    position: fixed
    right: 2rem
    bottom: 2rem
    margin-right: 2rem
    margin-left: 15px

    &:hover
      color: $color-accent-1

  .active
    color: $color-accent-1

  #menu
    visibility: hidden
    margin-right: 2rem

  #nav
    color: $color-accent-1
    letter-spacing: .01em
    font-weight: 200
    font-style: normal
    font-size: .8rem

    ul
      line-height: 15px

      a
        margin-right: 15px
        color: $color-accent-1

      a:hover
        underline(5px, $color-accent-1)

      li
        border-right: 1px dotted $color-accent-1

      li:last-child
        margin-right: 0
        border-right: 0

        a
          margin-right: 0

  #actions
    float: right
    margin-top: 2rem
    margin-right: 2rem
    width: 100%
    text-align: right

    ul
      display: block

    .info
      display: block
      font-style: italic

  #share
    clear: both
    padding-top: 1rem
    padding-right: 2rem
    text-align: right

    li
      display: block
      margin: 0

  #toc
    float: right
    clear: both
    overflow: auto
    margin-top: 1rem
    padding-right: 2rem
    max-width: 20em
    max-height: calc(95vh - 7rem)
    text-align: right

    a:hover
      color: $color-link

    .toc-level-1 > .toc-link
      display: none

    .toc-level-2
      color: $color-text
      font-size: .8rem

      &:before
        color: $color-accent-1
        content: "#"

    .toc-level-3
      color: $color-meta
      font-size: .7rem

    .toc-level-4
      color: darken($color-meta, 20%)
      font-size: .4rem

    .toc-level-5
      display: none

    .toc-level-6
      display: none

    .toc-number
      display: none

// smartphone + phapblet
@media screen and (max-width: 500px)
  #header-post
    display: none

@media screen and (max-width: 900px)
  #header-post
    #menu-icon
      display: none

    #actions
      display: none

@media screen and (max-width: 1199px)
  #header-post
    #toc
      display: none

@media screen and (min-width: 900px)
  #header-post
    #menu-icon-tablet
      display: none !important

    #top-icon-tablet
      display: none !important

@media screen and (min-width: 1199px)
  #header-post
    #actions
      width: auto

      ul
        display: inline-block
        float: right

      .info
        display: inline
        float: left
        margin-right: 2rem
        font-style: italic

@media print 
  #header-post
    display: none
  #footer-post-container
    display: none
